settingspage {
    > scrolledwindow {
        overshoot.top {
            background:
                linear-gradient(
                    to top,
                    #{'alpha(@accent_color, 0)'} 80%,
                    #{'alpha(@accent_color, 0.25)'} 100%
                ),
                linear-gradient(
                    #{'@borders'},
                    rgba(black, 0.05) 1px,
                    rgba(black, 0.0) rem(3px)
                );
        }

        undershoot.top {
            background:
                linear-gradient(
                    #{'@borders'},
                    rgba(black, 0.05) 1px,
                    rgba(black, 0.0) rem(3px)
                );
        }
    }

    .header-area {
        // avatar is inside of a widget
        widget {
            &:dir(ltr) {
                margin-left: rem(4px);
                margin-right: rem(9px);
            }

            &:dir(rtl) {
                margin-left: rem(9px);
                margin-right: rem(4px);
            }
        }

        image.large-icons {
            -gtk-icon-size: rem(48px);

            &:dir(ltr) {
                // Match square icon canvas whitespace at 48px
                margin-left: rem(-4px);
                margin-right: rem(7px);
            }

            &:dir(rtl) {
                margin-left: rem(7px);
                margin-right: rem(-4px);
            }
        }

        label.title-2 {
            // Cannot be a number or fonts break in Flatpak
            font-weight: bold;
            font-size: 2rem;
        }

        label:not(.title-2) {
            font-size: 0.95rem;
            opacity: 0.85;
        }

        switch {
            slider {
                // Match font size for title
                min-height: 2rem;
                min-width: 2rem;
            }

            &:dir(ltr) {
                margin-left: rem(12px);
            }

            &:dir(rtl) {
                margin-right: rem(12px);
            }
        }
    }

    .header-area,
    .content-area {
        padding: rem(12px);
    }

    actionbar.action-area {
        // Don't style the revealer
        background: transparent;
        box-shadow: none;
        padding: 0;

        box.end,
        box.start {
            border-spacing: rem(6px);
            padding: rem(12px);
        }
    }

    windowcontrols {
        margin: rem(6px);

        &.start,
        &.end {
            border-spacing: rem(6px);
        }
    }
}
